<template>
    <div id="community-detail">
        <div class="bar">
            <a href="javascript:window.history.go(-1);"><i class="fa fa-chevron-left"></i></a></div>

        <article>
            <div class="photo">
                <div class="pic"><img v-bind:src="articlecontent.media"></div>
                <div class="text">
                    <h1>{{ articlecontent.title }}</h1>
                    <ul>
                        <li>发布：{{articlecontent.created_at}}</li>
                        <li>阅读：{{ articlecontent.read_count }}</li>
                        <li @click="clickPraise"><i class="fa"
                                                    v-bind:class="articlecontent.is_praise ? 'fa-heart' : 'fa-heart-o'"></i>
                            {{ articlecontent.praise_count }}
                        </li>
                    </ul>
                    <img src="../assets/images/triangle.png">
                </div>
            </div>
            <p class="clr"></p>
            <div class="zhengwen" v-html='articlecontent.content'>

            </div>

            <ul class="info">
                <li>阅读：{{ articlecontent.read_count }}</li>
                <li @click="clickPraise"><i class="fa"
                                            v-bind:class="articlecontent.is_praise ? 'fa-heart' : 'fa-heart-o'"></i> {{
                    articlecontent.praise_count }}
                </li>
            </ul>
        </article>
    </div>
</template>

<script type="text/javascript">
import { MessageBox } from 'mint-ui';
    export default {
        data () {
            return {
                articlecontent: ''
            }
        },
        methods: {
            clickPraise: function () {
                var _self = this;

                if (this.articlecontent.is_praise) {
                    this.$http.delete(this.GLOBAL.serverAddr + '/article-praises/' + this.$route.params.id, {
                        headers: {
                            "Content-Type": "application/json",
                            'Authorization': this.GLOBAL.authorization
                        },
                        emulateJSON: true
                    }).then(function (response) {
                        _self.articlecontent.praise_count--;
                        _self.articlecontent.is_praise = 0;
                    }, function (response) {
                        // 这里是处理错误的回调
                        console.log(response)
                    });

                }
                else {
                    var data = {
                        target_id: this.$route.params.id
                    };
                    //转成json字符串
                    data = JSON.stringify(data);
                    this.$http.post(this.GLOBAL.serverAddr + '/article-praises', data, {
                        headers: {
                            "Content-Type": "application/json",
                            'Authorization': this.GLOBAL.authorization
                        },
                        emulateJSON: true
                    }).then(function (response) {
                        _self.articlecontent.praise_count++;
                        _self.articlecontent.is_praise = 1;
                    }, function (response) {
                        MessageBox.confirm('请先登录', '提示').then(action => {
                        	console.log('点击确定')
  
});
                        console.log(response)
                    });
                }
            }
        },
        mounted: function () {
            this.$http.get(this.GLOBAL.serverAddr + '/articles/' + this.$route.params.id, {
                headers: {
                    'Authorization': this.GLOBAL.authorization
                },
                emulateJSON: true
            }).then(function (response) {
                this.articlecontent = response.data;
                this.articlecontent.created_at = this.GLOBAL.timeTrans(this.articlecontent.created_at);

            }, function (response) {
                // 这里是处理错误的回调
                console.log(response)
            });
        }
    }
</script>

<style>
</style>
